<template>
	<view class="mypage mzw-page mzw-bgc1 mzw-safeB">
		<mzw-page-navbg />
		<u-navbar leftText="我的账单" :autoBack="true" placeholder :safeAreaInsetTop="true" bgColor="transparent" leftIconColor="#1C274C"></u-navbar>
		<u-sticky :customNavHeight="44+topSafeArea">
			<view class="m-mzw-date1">
				<view class="wp">
					<view class="con">
						<view class="date" :class="{'focus':startShow}" @click="handleStartPicker">
							<view>{{startDateValue}}</view>
							<div class="icon">
								<image :src="imageUrl+'mzw/icon-a1.svg'" mode="widthFix" style="width:100%;"></image>
							</div>
						</view>
						<view class="line">—</view>
						<view class="date" :class="{'focus':endShow}" @click="handleEndPicker">
							<view>{{endDateValue}}</view>
							<div class="icon">
								<image :src="imageUrl+'mzw/icon-a1.svg'" mode="widthFix" style="width:100%;"></image>
							</div>
						</view>
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="wp">
			<view class="ul-mzw-bill">
				<view class="li" v-for="(item,index) in list1" :key="index">
					<view class="con">
						<view class="icon">
							<image :src="imageUrl+item.pic" mode="widthFix" style="width:100%;height:auto;"></image>
						</view>
						<view class="col1">
							<view class="tit">{{item.tit}}</view>
							<view class="plate">{{item.plate}}</view>
						</view>
						<view class="col2">
							<view class="price">{{item.price}}</view>
							<view class="date">{{item.date}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 开始日期弹窗 -->
		<view class="m-mzw-date-popup">
			<u-popup :show="startShow" mode="top" :overlayStyle="overlayStyle" :customStyle="customStyle" :safeAreaInsetTop="true" :safeAreaInsetBottom="false" :zIndex="99" @close="startClose">
				<view class="popup-con">
					<mzw-date-picker default-value="2025-06-19" @reset="handleStartReset" @confirm="handleStartConfirm"></mzw-date-picker>
				</view>
			</u-popup>
		</view>
		<!-- 结束日期弹窗 -->
		<view class="m-mzw-date-popup">
			<u-popup :show="endShow" mode="top" :overlayStyle="overlayStyle" :customStyle="customStyle" :safeAreaInsetTop="true" :safeAreaInsetBottom="false" :zIndex="99" @close="endClose">
				<view class="popup-con">
					<mzw-date-picker default-value="2025-06-19" @reset="handleEndReset" @confirm="handleEndConfirm"></mzw-date-picker>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import mzwPageNavbg from '@/components/mzw-page-navbg.vue';
	import mzwDatePicker from '@/components/mzw-date-picker.vue';
	import getTopSafeArea from '@/static/safeTop.js';
	export default {
		components:{
			mzwPageNavbg,
			mzwDatePicker
		},
		data() {
			return {
				topSafeArea: 0,
				list1:[
					{
						pic: 'hg-icon7.png',
						tit: '补缴-夷陵大道锦绣华府停车场',
						price: '-￥100.00',
						plate: '鄂E·E12345',
						date: '2025-09-12 14:23'
					},{
						pic: 'hg-icon8.png',
						tit: '补缴-夷陵大道锦绣华府停车场',
						price: '-￥20.00',
						plate: '鄂E·E12345',
						date: '2025-09-12 14:23'
					},{
						pic: 'hg-icon7.png',
						tit: '补缴-夷陵大道锦绣华府停车场',
						price: '-￥5.00',
						plate: '鄂E·E12345',
						date: '2025-09-12 14:23'
					},{
						pic: 'hg-icon7.png',
						tit: '补缴-夷陵大道锦绣华府停车场',
						price: '-￥2.00',
						plate: '鄂E·E12345',
						date: '2025-09-12 14:23'
					},{
						pic: 'hg-icon8.png',
						tit: '补缴-夷陵大道锦绣华府停车场',
						price: '-￥4.00',
						plate: '鄂E·E12345',
						date: '2025-09-12 14:23'
					},
				],
				startShow: false,
				endShow: false,
				overlayStyle:{
					backgroundColor: 'rgba(28, 39, 76, 0.6)',
					zIndex: 99
				},
				startDateValue: '2025-06-19',
				endDateValue: '2025-06-19'
			};
		},
		onLoad() {
			this.topSafeArea = getTopSafeArea();
		},
		methods:{
			handleStartPicker(){
				this.endShow = false;
				this.startShow = true;
			},
			startClose(){
				this.startShow = false;
			},
			handleStartConfirm(e){
				this.startDateValue = e.date;
				this.startShow = false;
			},
			handleStartReset(){
				this.startDateValue = '2025-06-19';
				this.startShow = false;
			},
			handleEndPicker(){
				this.startShow = false;
				this.endShow = true;
			},
			endClose(){
				this.endShow = false;
			},
			handleEndConfirm(e){
				this.endDateValue = e.date;
				this.endShow = false;
			},
			handleEndReset(){
				this.endDateValue = '2025-06-19';
				this.endShow = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
.ul-mzw-bill{
	padding-top: 20rpx;
	overflow: hidden;
	.li{
		margin-bottom: 20rpx;
		.con{
			background-color: #fff;
			display: flex;
			align-items: center;
			padding: 30rpx 20rpx;
			border-radius: 20rpx;
			overflow: hidden;
			.icon{
				width: 48rpx;
				flex-shrink: 0;
				margin-right: 20rpx;
			}
			.col1{
				flex: 1;
				overflow: hidden;
				margin-right: 20rpx;
				.tit{
					font-weight: 600;
					font-size: 32rpx;
					line-height: 48rpx;
					color: #1C274C;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					margin-bottom: 10rpx;
				}
				.plate{
					font-weight: 600;
					font-size: 28rpx;
					line-height: 48rpx;
					color: rgba(28, 39, 76, 0.6);
				}
			}
			.col2{
				flex-shrink: 0;
				white-space: nowrap;
				.price{
					text-align: right;
					font-weight: 600;
					font-size: 36rpx;
					line-height: 48rpx;
					color: #FF2C41;
					margin-bottom: 10rpx;
				}
				.date{
					font-weight: 400;
					font-size: 24rpx;
					line-height: 32rpx;
					color: rgba(28, 39, 76, 0.6);
				}
			}
		}
	}
}
</style>
